<template>
  <div class="home">
    <div class="common-layout">
      <el-container>
        <el-header class="head" height="80px">
          <el-row :gutter="20">
            <el-col :span="4">
              <img class="logo" src="../assets/logo.png" alt="暂无噢~" />
            </el-col>
            <el-col :span="16">
              <h2>后台管理系统</h2>
            </el-col>
            <el-col :span="4">
              <span @click="exitLogin" class="exit-login">退出登录</span>
            </el-col>
          </el-row>
        </el-header>
        <el-container>
          <el-aside class="aside" width="200px">
            <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              :default-active="active"
              text-color="#fff"
              router
            >
              <!-- router 开启路由模式 通过el-menu-item index 进行跳转 -->
              <el-menu-item
                :index="item.path"
                v-for="item in list"
                :key="item.path"
              >
                <span>{{ item.meta.title }}</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <!-- 内容展示 -->
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default defineComponent({
  name: 'Home',
  setup() {
    const router = useRouter()

    const route = useRoute()

    const list = router.getRoutes().filter((r) => r.meta.isShow)

    const exitLogin = () => {
      localStorage.removeItem('token')
      router.push('/login')
    }
    return { list, active: route.path, exitLogin }
  }
})
</script>
<style lang="scss" scoped>
.home {
  .head {
    height: 80px;
    background-color: #666;
    .logo {
      height: 80px;
    }
    h2,
    .exit-login {
      text-align: center;
      height: 80px;
      line-height: 80px;
      color: #fff;
      cursor: pointer;
    }
  }
  .aside {
    .el-menu {
      height: calc(100vh - 80px);
    }
  }
}
</style>
